たかがボタン、されどボタン ～button要素から深ぼるボタンUIの定義について～
https://gyazo.com/3aa846df22d905f5a1ef7379cd7521b2
今やWebサイトやアプリケーションに必ず存在するようになった「ボタン」というUI。私たちは毎日当たり前のように実装していますが、「ボタンとは何か？」と聞かれたら、明確に定義できるでしょうか？ <a>タグをボタン風に装飾したUI、type属性を忘れて意図せず画面をリロードさせる<button>、そして歴史の彼方に消えつつある<input type="button">...。なぜこんなにも多様な『ボタンのようなもの』が生まれ、そしてバグの温床となるのでしょうか。
私はこれまで、マークアップのセマンティクスを重視する立場として、こうした「残念な」実装が溢れる現状を常にもどかしく感じてきました。「動けば良い」という流れの中で、なぜ「本来あるべき姿」が失われてしまうのでしょうか。
このセッションでは、「type属性の指定漏れ」でバグを踏んだ経験や、デザイナーと「ここはリンクか？ボタンか？」で実装方針が割れた際の苦い議論を基に、このボタンUIを深掘りします。
HTML仕様やアクセシビリティの観点から「ボタンとは何か」を再定義すると同時に、私が実務のコードレビューや設計議論で直面してきた葛藤と、それを乗り越えるための知見を共有します。
この発表を経て「たかが」と思っていたボタンUIについての考えを変えるきっかけになるかもしれません。
期待する聴者に持ち帰ってほしい内容
「ボタンとは何か？」という問いに対し、セマンティクス・振る舞い・アクセシビリティ の観点から自信を持って説明できるようになる
type属性の指定漏れによる意図せぬフォーム送信バグを、未来永劫なくすことができる
リンクをボタンのように見せるUI（リンクボタン）を実装するときに配慮すべきことに気づける
21章 デザイン詳細：コントロールとダイアログ
立体的ではなくなったのでリンクのそれと判別がしづらくなった どちらも「押せそうなこと」はわかるが…
ブックマークボタン
アイコンボタン
進むボタン、戻るボタン、更新ボタン
まさかdivでやってないよね
正しい実装をするために仕様を覗きに行こう
buttonの定義
aとの違いを明示する
違うこと
disabledできない
同じようにできること
属性値
disabled
form
command、commandforの存在について
type
これについては熱弁したいyamanoku.icon
デフォルトをtype=buttonにしようぜっていう提案
初期スタイルについて
汎用的なボタンを実装する話
何から参考にする？
モバイルにおけるガイドライン
取り上げられているUIの範囲が狭いという批判